<span class="title" mat-dialog-title>{{ 'USER.PROFILE.AVATAR.UPLOADTITLE' | translate }}</span>
<div mat-dialog-content>
  <p class="desc cnsl-secondary-text">{{ 'USER.PROFILE.AVATAR.CURRENT' | translate }}</p>
  <div class="current-pic-wrapper">
    <img class="pic" [src]="data.profilePic" *ngIf="data.profilePic" />
    <span class="fill-space"></span>
    <input #selectedFile style="display: none" class="file-input" type="file" (change)="onDrop($event)" />
    <button class="btn" mat-raised-button color="primary" type="button" (click)="selectedFile.click()">
      {{ 'USER.PROFILE.AVATAR.UPLOADBTN' | translate }}
    </button>
    <button
      *ngIf="data.profilePic"
      matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
      color="warn"
      (click)="deletePic()"
      mat-icon-button
    >
      <i class="las la-minus-circle"></i>
    </button>
  </div>
</div>
<div mat-dialog-actions class="action">
  <button color="primary" mat-stroked-button class="ok-button" (click)="closeDialog()">
    {{ 'ACTIONS.CLOSE' | translate }}
  </button>
</div>
